<template>
    <div class="header">
        <div class="top">
            <div class="backLeft" @click="backUp">

                <img :src="ImgNewUrl+'/whiteback.png'" alt="">
            </div>
            <div>{{ msg }}</div>
            <div class="backRight" v-if="isPhone == 1" @click="toPhoneMsg">
                <img :src="ImgNewUrl+'/whitecall.png'" alt="">
            </div>
            <div class="backRight" v-if="isPhone == 2" @click="toShareMsg">
                <img :src="ImgNewUrl+'/details/icon-fenxiang.png'" alt="">
            </div>
            <div class="backRight" style="width:12vw;color:#3C3E3F;font-size:3.733vw;" v-if="isPhone == 4"
                 @click="toOrderMsg">
                删除
            </div>
            <div class="backRight" style="width:15vw;color:#3C3E3F;font-size:3.733vw;" v-if="isPhone == 5"
                 @click="toMemberRulesMsg()">
                会员规则
            </div>
            <div class="backRight" style="width:12vw;color:#3C3E3F;font-size:3.733vw;" v-if="isPhone == 6"
                 @click="toEditCollectMsg">
                编辑
            </div>
            <div class="backRight" style="width:12vw;color:#3C3E3F;font-size:3.733vw;" v-if="isPhone == 7"
                 @click="toFinishCollectMsg">
                完成
            </div>
            <div class="backRight" style="width:12vw;color:#2AB32F;font-size:3.733vw;" v-if="isPhone == 9"
                 @click="toSaveMsg">
                保存
            </div>
            <div class="backRight" style="width:19vw;color:#3C3E3F;font-size:3.733vw;" v-if="isPhone == 10"
                 @click="toAddAdress()">
                添加新地址
            </div>
            <div class="backRight" style="width:12vw;color:#3C3E3F;font-size:3.733vw;" v-if="isPhone == 11"
                 @click="toSaveAddMsg">
                保存
            </div>

        </div>
        <phone @showCancelPhone="cancelPhone" :showFlag="phoneShow"></phone>
        <share @showCancelShare="cancelShare" :showFlag="shareShow"></share>
        <delete-shop @showCancelOrder="cancelOrder" :showFlag="orderShow"></delete-shop>

    </div>
</template>

<script>
import Phone from './Phone'
import Share from './Share'
import DeleteShop from './DeleteShop'

export default {
    props: {
        backUrl: {
            type: String,
            default: ''
        },
        msg: {
            type: String,
            default: '奖呗'
        },
        isPhone: {
            type: String,
            default: '1'
        },
        // memberRules:{
        //   type: String,
        //   default: false
        // }
    },
    components: {
        Phone,
        Share,
        DeleteShop
    },
    data() {
        return {
            phoneShow: false,
            shareShow: false,
            orderShow: false,
            collectShow: false,
        }
    },
    mounted() {

    },
    methods: {
        backUp() {
            // console.log(this.backUrl)
            // console.log(this.$router)
            if (this.backUrl) {
                // if (this.backUrl == "/dashboard") {
                //     this.$store.dispatch('updateTabbarIndex', {
                //         "tabbarIndex": 0
                //     });
                // }
                this.$router.push(this.backUrl);
            } else {
                this.$router.go(-1);
            }
            // 返回首页
            //  this.$router.push("/");
        },
        toPhoneMsg() {
            this.phoneShow = true;
        },
        cancelPhone(data) {
            this.phoneShow = false;
        },
        toShareMsg() {
            this.shareShow = true;
        },
        cancelShare(data) {
            this.shareShow = false;
        },
        toOrderMsg() {
            this.orderShow = true;
        },
        toMemberRulesMsg() {
            // memberRules
            // sessionStorage.setItem("memberRulesParam", memberRules);
            this.$router.push("/memberBenefit/memberRules");
        },
        // 添加新地址
        toAddAdress() {
            this.$router.push("/shoppingAddress/addAddress");
        },
        cancelOrder(val) {
            if (val == 2) {
                this.$emit("deleteShop", 1);
            }
            this.orderShow = false;
        },
        toEditCollectMsg() {
            this.$emit("editCollect", 1);
        },
        toFinishCollectMsg() {
            this.$emit("editCollect", 2);
        },
        cancelCollect() {
            this.$emit("deleteCollect", 1);
            this.collectShow = false;
        },
        toSaveMsg() {
            this.$emit("saveName", 2);
        },
        // 保存新增地址
        toSaveAddMsg() {
            this.$emit("saveAddress");
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.top {
    width: 100%;
    height: 13.06vw;
    font-size: 4.26vw;
    font-family: PingFangSC-Medium;
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
    line-height: 13.06vw;
    overflow: hidden;
    position: relative;
    background: #FFFFFF;
    background-color: rgb(10, 0, 62);

   //box-shadow: 0px 0.011rem 0px 0px rgba(190, 190, 190, 0.5);
}

.backLeft {
    cursor: pointer;
    padding: 4.26vw;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
}

.backLeft img {
    height: 4.53vw;
    width: 2.67vw;
}

.backRight {
    width: 4.8vw;
    position: absolute;
    right: 4vw;
    top: 54%;
    transform: translateY(-50%);
}

.backRight img {
    height: 4.8vw;
    width: 4.8vw;
}
</style>
